<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>

<html>
    <head>
		<%@ include file="/WEB-INF/views/include/common.jsp" %>
        <meta name="AUTHOR" content="QroTech Inc." />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
		<meta http-equiv="PRAGMA" content="NO-CACHE">
		<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>큐로넷::위치관제서비스</title>
		<link rel="stylesheet" href="${cssUrl}/header.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/m-100.css" type="text/css" />
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
		<script src="${jsUrl}/m-100.js"></script>
	 <title>New Web Project</title>
    </head>
    <body>
    	<div class="headerContent">
	
		<div class="pageHeader">
			<%@ include file="/WEB-INF/views/include/logoLink.jsp" %>
			<div id="pageNav">
				<ul>
<!-- 					<a href="#"><li class="menu1"></li></a> -->
<!-- 					<a href="javascript:alert('관리자 권한이 필요합니다.')"><li class="menu2"></li></a> -->
<!-- 					<a href="/envInfo/carInfoMng"><li class="menu3"></li></a> -->
<!-- 					<a><li class="menu4"></li></a> -->
					<%@ include file="/WEB-INF/views/include/mainNavi.jsp" %>
				</ul>
			</div>
			<div id="pageNavRight">
				<%@ include file="/WEB-INF/views/include/titleLink.jsp" %>
			</div>
			
			
		</div>
		<div class="header_line"></div>
	</div><!--header end-->	
	<div class="searchBox" style="display:none;">
		<div class="table_wrapper">
			<table cellpadding="0" cellspacing="0" id="searchTextResult">
			</table>
		</div>
	</div>
        <div id="contentWrapper" class="carsList" >
			<div id="mainContent">
				<div class="titleList"><p>전체 차량 리스트</p></div>
				
				<div id="searchList" class="searchList" >
					<form id="theForm" name="theForm" method="post" onSubmit="return false;">
					<fieldset>
						<div >
							<ul>
							<sec:authorize access="hasRole('ROLE_QADMIN')">
								<li class="same_margin">
									<select name="customerCode" onChange="getSearchData()">
										<c:forEach var="customerDTO" items="${customerInfo}">
										<option value="<c:out value="${customerDTO.customerCode}"/>"><c:out value="${customerDTO.customerName}"/></option>
										</c:forEach>
									</select>
							</li>
							</sec:authorize>
								<li class="same_margin">
									<select id="searchAddressComponent1" name="addressComponent1" onChange="getAddressComponent2()">
										<option value="" align="center">시/도</option>										
										<c:forEach var="posDTO" items="${posInfo1}">
										<option value="<c:out value="${posDTO.addressComponent1}"/>"><c:out value="${posDTO.addressComponent1}"/></option>
										</c:forEach>
									</select>
							</li>
								<li class="same_margin">
									<select id="searchAddressComponent2" name="addressComponent2" disabled="true">
										<option value="">시/구/군</option>
										<c:forEach var="posDTO" items="${posInfo2}">
										<option value="<c:out value="${posDTO.addressComponent2}"/>"><c:out value="${posDTO.addressComponent2}"/></option>
										</c:forEach>
									</select>
								</li>
								<li class="same_margin">
									<select id="searchDeptCode" name="deptCode" style="width:110px;">
										<option value="">소속</option>
										<c:forEach var="deptDTO" items="${deptInfo}">
										<option value="<c:out value="${deptDTO.deptCode}"/>"><c:out value="${deptDTO.deptName}"/></option>
										</c:forEach>
									</select>
								</li>
								<li class="same_margin">
									<select id="searchCarType" name="carType">
										<option value="">차종</option>
										<c:forEach var="carDTO" items="${carTypeInfo}">
										<option value="<c:out value="${carDTO.carTypeCode}"/>"><c:out value="${carDTO.carTypeName}"/></option>
										</c:forEach>
									</select>
								</li>
								<li class="same_margin">
									<select id="searchBaggage" name="baggage" style="width:130px;">
										<option value="">운반물 내용</option>
										<c:forEach var="carDTO" items="${baggageInfo}">
										<option value="<c:out value="${carDTO.baggage}"/>"><c:out value="${carDTO.baggage}"/></option>
										</c:forEach>
									</select>
								</li>
								<li class="same_margin">
									<select id="select_last" name="dev_CarDeviceCode">
										<option value="">단말기</option>
										<c:forEach var="deviceDTO" items="${deviceInfo}">
										<option value="<c:out value="${deviceDTO.carDeviceCode}"/>"><c:out value="${deviceDTO.deviceID}"/></option>
										</c:forEach> 
									</select>
								</li>
								<li class="same_margin2">
									<input id="driver" type="radio" name="searchType" checked="checked" value="1">운전자명
								</li>
								<li class="same_margin2">
									<input type="radio" id="license_plate" name="searchType" value="2">차량번호
								</li>
								<li class="same_margin">
									<input type="text" id="searchText" name="searchName" size="10" onKeyup="getSearchText(event.keyCode);" autocomplete="off"><br>									
								</li>
								
								<li class="same_margin3">
									<img src="${imgUrl}/black_box.png" onclick="getSearchCarList()" style="cursor:pointer;">
								</li>
							</ul>
						</div>
					</fieldset >
			
				</form><!-- searchList form end -->
				</div><!-- SearchList end -->
				<div class="secondMenu">
					<div id="searchInfo">
						<ul >
						<li id= "locationInfo"><span>위치정보</span></li>
						<li class="last" id="totalSearchNum">총<span id="carListCnt">${carListCnt}</span>건 검색됨...</li>
					</ul>
					</div>
					<div id="secondMenuNav">
						<ul >
							<li><a class="lookAtMap" onClick="gotoM110()"><img src="${imgUrl}/buttonIcon_map.png">&nbsp;전체지도보기</a></li>
							<li><a class="saveToExcel" onClick="getExcelDown()"><img src="${imgUrl}/buttonIcon_excel.png">&nbsp;엑셀저장</a></li>
						</ul>
					</div>
					
						
					
				
				</div> <!-- secondMenu end -->
			<div  class="scrollWidth">	
				<div class="chart">
					
					<div class="chart_head" >
						<table  valign="top" cellpadding="0" cellspacing="0"> 
					
						<tr valign="top" >
							<th width="30px">순번</th>
							<th width="90px">차량번호</th>
							<th width="75px">운전자명</th>
							<th width="103px">연락처</th>
							<th width="119px">소속</th>
							<th width="100px">차종</th>
							<th width="90px">운반물내용</th>
							<th width="110px">수신시각</th>
							<th width="70px">시/도</th>
							<th width="85px">시/구/군</th>
							<th width="125px">동/면</th>
							<th width="80px">차량상태</th>
							<th width="70px">차량속도</th>
							<th width="46px">DTG</th>
							<th width="46px">CDMA</th>
							<th width="46px">GPS</th>
							<th width="50px">전압(V)</th>
							<th width="50px">방향</th>
							<th width="70px">관심지역</th>
							<th width="70px">거리(Km)</th>
							<th width="100px">누적거리(Km)</th>
							<th width="*">단말기번호</th>
							
							
						</tr>	
					</table>
				</div><!--chart_head end-->
				<div id="scrollHeight" class="chart_body">
					<table cellpadding="0" cellspacing="0" id="carList"> 
						 <tr onClick="gotoM120(this)">
							<td width="30px" id="rownum"></td>
							<td width="90px" id="carRegiNumber"></td>
							<td width="75px" class="change_line" id="dri_Name"></td>
							<td width="103px" id="dri_HandPhone"></td>
							<td width="119px" class="change_line" id="dep_DeptName"></td>
							<td width="100px" class="change_line" id="typ_CarTypeName"></td>
							<td width="90px"  class="change_line" id="baggage"></td>
							<td width="110px" id="detectTime"></td>
							<td width="70px" id="addressComponent1"></td>
							<td width="85px" id="addressComponent2"></td>
							<td width="125px" class="change_line" id="addressComponent3"></td>
							<td width="80px" id="startUp"></td>
							<td width="70px" id="speed"></td>
							<td width="46px" id="dev_DTGState"></td>
							<td width="46px" id="dev_CDMAState"></td>
							<td width="46px" id="dev_GPSState"></td>
							<td width="50px" id="voltage"></td>
							<td width="50px" id="cadinalStr"></td>
							<td width="70px" id="checkArea"></td>
							<td width="70px" id="dayDistanceStr"></td>
							<td width="100px" id="totalDistanceStr"></td>
							<td width="*" id="dev_DeviceID"></td>
							<td style="display:hidden;"><input type="hidden" id="carCode"/></td>							
						</tr>
						</table>
					</div><!-- chart_body end -->
					
				</div><!-- first whole chart end-->
			</div>	<!-- scroll horizontal end-->
			
       	<form id="paramForm" name="paramForm" action="" method="post" style="display:none;">
       		<sec:authorize access="hasRole('ROLE_QADMIN')">
       		<input type="hidden" id="paramCustomerCode" name="customerCode" value="<c:out value="${customerCode}"/>"/>
       		</sec:authorize>       		
       		<input type="hidden" id="paramCarCode" name="carCode"/>
       		<input type="hidden" id="paramAddressComponent1" name="addressComponent1" />
       		<input type="hidden" id="paramAddressComponent2" name="addressComponent2" />
       		<input type="hidden" id="paramDeptCode" name="deptCode" />
       		<input type="hidden" id="paramCarType" name="carType" />
       		<input type="hidden" id="paramBaggage" name="baggage" />
       		<input type="hidden" id="paramDev_CarDeviceCode" name="dev_CarDeviceCode" />
       		<input type="hidden" id="paramSearchType" name="searchType" />
       		<input type="hidden" id="paramSearchName" name="searchName" />
       		
       	</form>
        <div class="footer">
        	<div class="footerCenter"><span>Copyright ⓒ 2013 Qrotech Co.,Ltd. All rights reserved.</span>
        		</div>
        	
        </div>		
        	
			</div> <!-- mainContent end -->
			
		</div><!-- contentWrapper end -->
		<script language="javascript">
		function init () {
			var customerCode = <c:out value="${customerCode}"/>;
			$("select[name=customerCode] option[value="+customerCode+"]").prop("selected", true);
			getSearchData();
			getSearchCarList();
		//	getAddressComponent2();
		}
		var _this = this;
		$(document).ready(function(){
			init();
			   var windowHeight = $(window).innerHeight();
		       var windowWidth = $(window).innerWidth();
		       
		       var new_height = windowHeight - 250;
		       var new_width = windowWidth - 0;
		       $('.footerCenter').css('margin-left', ((new_width / 2) - 200) + 'px');
		       $('.chart_body').css('height',(new_height-30) +'px');
		       $('.scrollWidth').css('width', new_width + 'px');
		}); 
		function getSearchText(){			
   	    	$('#searchText').autocomplete({
   	    		delay:500,
                source:function(request, response){
                	var url="getSearchText.json";
		    	    
            	    var param={};		    
            		<sec:authorize access="hasRole('ROLE_QADMIN')">
        			param['customerCode'] = $('select[name=customerCode]').val();
        			</sec:authorize>
        			param['searchText'] = $("#searchText").val();
        			
        			var searchType = $(":input:radio[name=searchType]:checked").val();
   	    			if(searchType == 1) {
	                	AjaxPost(url, param, function(data){
	                		response( $.map( data.autoText, function( item ) {
	                          if (item.name.toLowerCase().indexOf($("#searchText").val().toLowerCase()) >= 0)
	                          {
	                              return {
	                                  label: item.name.toLowerCase().replace($( "#searchText" ).val().toLowerCase(),$( "#searchText" ).val().toLowerCase()),
	                                  value: item.name
	                              }
	                          }
	                      	}));
	                	});
   	    			}
                },                
                select: function (event, ui) {
                    //아이템 선택시 처리 코드
                	getSearchCarList();
                },
                selectFirst: true,
                minLength: 1,
                open: function () {
                    //$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                    $('.ui-autocomplete.ui-menu').css('width', '90px');
                },
                close: function () {
                    //$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
   	        });    	 	
		}
		function changeText(tr) {
			$('#searchText').val($(tr).find('#textName').text());
			$(".searchBox").hide();
		}
		function getSearchCarList() {
			$(".searchBox").hide();
			var theFormParam = $('#theForm').serialize();
			<sec:authorize access="hasRole('ROLE_QADMIN')">
			$('#paramForm').find('#paramCustomerCode').val($('select[name=customerCode]').val());
			</sec:authorize>
			$('#paramAddressComponent1').val($("select[name=addressComponent1]").val());
			$('#paramAddressComponent2').val($("select[name=addressComponent2]").val());
			$('#paramDeptCode').val($("select[name=deptCode]").val());
			$('#paramCarType').val($("select[name=carType]").val());
			$('#paramBaggage').val($("select[name=baggage]").val());
			$('#paramDev_CarDeviceCode').val($("select[name=dev_CarDeviceCode]").val());
			$('#paramSearchType').val($(":input:radio[name=searchType]:checked").val());
			$('#paramSearchName').val($("#searchName").val());
			
			var param = $('#theForm').serialize();
			_this.table1 = tableSync('carList');
			
			try{				
	    		var url="getSearchCarList.json";
	    		
	    		AjaxPost(url, param, function(data){
	    			/* jsonLog(data.carList); */
	    			 if (data.carList.length > 0) {
	    				$(data.carList).each(function(ind) {
	    					var time = this['detectTime'];
	    					if(time != null) {
								this['detectTime'] = formatter.dateFormatYYMMDDHHMM(new Date(time));
	    					}
							this['startUp'] = "시동"+this['startUp'];
							this['dri_HandPhone'] = formatter.strTelNum(this['dri_HandPhone']);
							this['dev_PhoneNum'] = formatter.strTelNum(this['dev_PhoneNum']);
							var voltage = this['voltage'];
							if(voltage > 0) {
								this['voltage'] = voltage/10+"V";
							}							
	    				});
	    				_this.table1.tableAutoSync(data.carList);	    				
	    			 }     			
	    			 $('#carListCnt').text(data.carListCnt);
	    			
	    			 var windowHeight = $(window).innerHeight();
	    		     var windowWidth = $(window).innerWidth();
	    		       
	    		     var new_height = windowHeight - 250;
	    		     var new_width = windowWidth - 0;
	    		     $('.footerCenter').css('margin-left', ((new_width / 2) - 200) + 'px');
	    		     $('.chart_body').css('height',(new_height-30) +'px');
	    		     $('.scrollWidth').css('width', new_width + 'px');
	    		});
	    		
	    	}catch(e){
	    		//logs(e);	    		
	    	}	    	
		}
		
		function gotoM110(){
			$('#paramAddressComponent1').val($("select[name=addressComponent1]").val());
			$('#paramAddressComponent2').val($("select[name=addressComponent2]").val());
			$('#paramDeptCode').val($("select[name=deptCode]").val());
			$('#paramCarType').val($("select[name=carType]").val());
			$('#paramBaggage').val($("select[name=baggage]").val());
			$('#paramDev_CarDeviceCode').val($("select[name=dev_CarDeviceCode]").val());
			$('#paramSearchType').val($(":input:radio[name=searchType]:checked").val());
			$('#paramSearchName').val($("#searchName").val());
			
			$('#paramForm').attr('action','/map/carListInMap','method','post');
			$('#paramForm').submit();
		}
		function gotoM120(tr){
			var carCode = $(tr).find('#carCode').val();
			$('#paramCarCode').val(carCode);
			
			$('#paramForm').attr('action','/map/carRootDetail','method','post');
			$('#paramForm').submit();
		}
		function getExcelDown() {
			var param = $('#theForm').serialize();
			location.href = "/getExcelDown?"+param;			
		}
		function getAddressComponent2() {
			var value = $("select[name=addressComponent1]").val();
			var param = "addressComponent1="+value;
			<sec:authorize access="hasRole('ROLE_QADMIN')">
			var customerCode = $('select[name=customerCode]').val();
			param += "&customerCode="+customerCode;
			</sec:authorize>
			$("select[name=addressComponent2]").attr("disabled", false);
			$("select[name=addressComponent2]").find('option').each(function() {
				   $(this).remove();
			  });
			
			var optionStr = "<option value=''>시/구/군</option>";
			$("#searchAddressComponent2").append(optionStr);
			if (value != '') {
				var url="getAddressComponent2.json";
				AjaxPost(url, param, function(data){
					$(data.posInfo2).each(function(ind) {
				 		optionStr = "<option value="+this['addressComponent2']+">"+this['addressComponent2']+"</option>";
				 		$("#searchAddressComponent2").append(optionStr);
					});
				});
			} else {
				$("select[name=addressComponent2]").attr("disabled", true);
			}
		}	
		function getSearchData() {
			
			$("select[name=addressComponent1]").find('option').each(function() {
				   $(this).remove();
			});
			
			$("select[name=addressComponent2]").find('option').each(function() {
				   $(this).remove();
			});
			
			$("select[name=addressComponent2]").attr("disabled", true);
			
			$("select[name=deptCode]").find('option').each(function() {
				   $(this).remove();
			});
			$("select[name=carType]").find('option').each(function() {
				   $(this).remove();
			});
			$("select[name=baggage]").find('option').each(function() {
				   $(this).remove();
			});
			$("select[name=dev_CarDeviceCode]").find('option').each(function() {
				   $(this).remove();
			});
			
			var url="getSearchData.json";
			var param = {}; 
			param['customerCode'] = $('select[name=customerCode]').val();
			var optionStr = "";
			AjaxPost(url, param, function(data){
				
				optionStr = "<option value=''>시/도</option>";
				$("#searchAddressComponent1").append(optionStr);
				$(data.posInfo1).each(function(ind) {
			 		optionStr = "<option value="+this['addressComponent1']+">"+this['addressComponent1']+"</option>";
			 		$("#searchAddressComponent1").append(optionStr);
				});				
				
				optionStr = "<option value=''>시/구/군</option>";
				$("#searchAddressComponent2").append(optionStr);
				
				optionStr = "<option value=''>소속</option>";
				$("#searchDeptCode").append(optionStr);
				$(data.deptInfo).each(function(ind) {
			 		optionStr = "<option value="+this['deptCode']+">"+this['deptName']+"</option>";
			 		$("#searchDeptCode").append(optionStr);
				});
				optionStr = "<option value=''>차종</option>";
				$("#searchCarType").append(optionStr);
				$(data.carTypeInfo).each(function(ind) {
			 		optionStr = "<option value="+this['carTypeCode']+">"+this['carTypeName']+"</option>";
			 		$("#searchCarType").append(optionStr);
				});
				optionStr = "<option value=''>운반물내용</option>";
				$("#searchBaggage").append(optionStr);
				$(data.baggageInfo).each(function(ind) {
			 		optionStr = "<option value="+this['baggage']+">"+this['baggage']+"</option>";
			 		$("#searchBaggage").append(optionStr);
				});
				optionStr = "<option value=''>단말기</option>";
				$("select[name=dev_CarDeviceCode]").append(optionStr);
				$(data.deviceInfo).each(function(ind) {
			 		optionStr = "<option value="+this['carDeviceCode']+">"+this['deviceID']+"</option>";
			 		$("select[name=dev_CarDeviceCode]").append(optionStr);
				});
				
				getSearchCarList();
			});
			
		}	
		function logs(l){
			if(typeof console == 'object'){
// 				console.log(l);
			}
		}
		function jsonLog(j){
			if(typeof JSON == 'object'){
				//logs(JSON.stringify(j));
			}
		}
	    </script>		
    </body>
</html>
